<div class="thumbnail">
  <img src="http://placehold.it/820X230" alt="商品图片">
  <div>
    <h4 class="pull-right">{{product.price}}元</h4>
    <h4>{{product.title}}</h4>
    <p>{{product.desc}}</p>
  </div>
  <div>
    <p class="pull-right">{{comments.length}}</p>
    <app-stars [rating]="product.rating"></app-stars>
  </div>
</div>
<div class="well">
  <div>
    <button class="btn btn-default" (click)="isCommentHidden = !isCommentHidden">发表评论</button>
  </div>
  <div [hidden]="isCommentHidden">
     <div> 
       <app-stars [(rating)]="newRating" [readonly]="false"></app-stars>
      </div>
      <div>
        <textarea  [(ngModel)]="newComment"></textarea>
      </div>
      <div style="margin-top:5px;">
          <button class="btn btn-success" (click)="addComment()">提交</button>
      </div>
  </div>
  <div class="row" *ngFor="let comment of comments">
    <hr>
    <div class="col-md-12">
      <app-stars [rating]="comment.rating"></app-stars>
      <span>{{comment.user}}</span>
      <span>{{comment.content}}</span>
      <span class="pull-right">{{comment.timestamp}}</span>
    </div>
  </div>
</div>